<template>
  <basic-container>
    <div class="sku-table">
      <!--<el-collapse v-model="activeNames">-->
        <template v-for="(item, index) in goodsSku">
          <div class="table-row" v-if="(specType=='1' && index=='0') || specType!='1'">
          <!--<div class="table-row">-->
            <div class="header">
              <template>
                <span class="title" v-if="specType=='1'">{{ item.name }}</span>
                <span class="title" v-else>{{ item.serviceName }} {{ item.serviceName?'-':'' }} {{ item.name }}</span>
              </template>
              <el-button type="primary" icon="el-icon-plus" class="right-btn" @click="selectSkuItem(item.serviceName, item.name, item.skus)"></el-button>
            </div>
            <el-table ref="skuTable" :data="item.skus" size="mini" fit highlight-current-row border row-class-name="table-row-style1" cell-class-name="table-cell-style1">
              <el-table-column prop="id" label="SKU ID" align="center" width="150">
                <template slot-scope="scope">
                  {{ !scope.row.id ? '-' : scope.row.id }}
                </template>
              </el-table-column>
              <el-table-column label="规格属性值"  width="420" align="center">
                <template slot="header" slot-scope="scope">
                  <el-row>
                    <el-col :span="24">规格属性值</el-col>
                  </el-row>
                  <el-row>
                    <template v-for="(specClassItem,idx) in goodsSpuSpecDict[item.id]">
                      <el-col :span="24/goodsSpuSpecDict[item.id].length" class="header-col">{{ specClassItem['name'] }}</el-col>
                    </template>
                  </el-row>
                </template>
                <template slot-scope="scope">
                  <el-row class="row-style1">
                    <template  v-for="(tdInfo,idx) in scope.row.specs">
                      <el-col :span="24/item.specClassList.length" class="col-item">
                        <div class="td-content">{{ scope.row['name' + (idx+1)] || '--'}}</div>
                      </el-col>
                    </template>
                  </el-row>
                </template>
              </el-table-column>
              <el-table-column prop="picUrl" label="图片" align="center" width="120">
                <template slot="header" slot-scope="scope">
                  <el-row>
                    <el-col :span="24"><span class="red-font">*</span>图片</el-col>
                  </el-row>
                </template>
                <template slot-scope="scope">
                  <img
                    v-if="scope.row.picUrl"
                    :src="scope.row.picUrl"
                    alt
                    style="width: 100px; height: 100px; cursor: pointer"
                    @click="addImg(scope.row)"
                    :disabled="skuTableType"
                  />
                  <el-button
                    v-else
                    icon="el-icon-plus"
                    :disabled="skuTableType"
                    @click="addImg(scope.row)"
                  ></el-button>
                </template>
              </el-table-column>
              <el-table-column prop="marketPrice" align="center" width="180">
                <template slot="header" slot-scope="scope">
                  <span class="red-font">*</span>
                  市场价(元)
                </template>
                <template slot-scope="scope">
                  <el-input-number
                    size="mini"
                    controls-position="right"
                    v-model="scope.row['marketPrice']"
                    :precision="2"
                    :step="0.01"
                    :min="0.01"
                    :max="99999999"
                    :disabled="!scope.row['enable']||skuTableType"
                    @change="changeRowInfo('marketPrice', scope.row)"
                  ></el-input-number>
                </template>
              </el-table-column>


              <el-table-column prop="androidSalesPrice" align="center" width="180">
                <template slot="header" slot-scope="scope">
                  <span class="red-font">*</span>
                  销售价-Android(元)
                </template>
                <template slot-scope="scope">
                  <el-input-number
                    size="mini"
                    controls-position="right"
                    v-model="scope.row['androidSalesPrice']"
                    :precision="2"
                    :step="0.01"
                    :min="0.01"
                    :max="99999999"
                    :disabled="!scope.row['enable']||skuTableType"
                    @change="changeRowInfo('androidSalesPrice', scope.row)"
                  ></el-input-number>
                </template>
              </el-table-column>

              <el-table-column prop="iosSalesPrice" align="center" width="180">
                <template slot="header" slot-scope="scope">
                  <span class="red-font">*</span>
                  销售价-IOS(元)
                </template>
                <template slot-scope="scope">
                  <el-input-number
                    size="mini"
                    controls-position="right"
                    v-model="scope.row['iosSalesPrice']"
                    :precision="2"
                    :step="0.01"
                    :min="0.01"
                    :max="99999999"
                    :disabled="!scope.row['enable']||skuTableType"
                    @change="changeRowInfo('iosSalesPrice', scope.row)"
                  ></el-input-number>
                </template>
              </el-table-column>

              <!--<el-table-column prop="salesPrice" align="center" width="180">-->
                <!--<template slot="header" slot-scope="scope">-->
                  <!--销售价(元)-->
                <!--</template>-->
                <!--<template slot-scope="scope">-->
                  <!--<el-input-number-->
                    <!--size="mini"-->
                    <!--controls-position="right"-->
                    <!--v-model="scope.row['salesPrice']"-->
                    <!--:precision="2"-->
                    <!--:step="0.01"-->
                    <!--:min="0.01"-->
                    <!--:max="99999999"-->
                    <!--:disabled="!scope.row['enable']||skuTableType"-->
                  <!--&gt;</el-input-number>-->
                <!--</template>-->
              <!--</el-table-column>-->

              <el-table-column prop="tobSalesPrice" align="center" width="180">
                <template slot="header" slot-scope="scope">
                  <span class="red-font">*</span>
                  销售价-TOB(元)
                </template>
                <template slot-scope="scope">
                  <el-input-number
                    size="mini"
                    controls-position="right"
                    v-model="scope.row['tobSalesPrice']"
                    :precision="2"
                    :step="0.01"
                    :min="0.01"
                    :max="99999999"
                    :disabled="!scope.row['enable']||skuTableType"
                    @change="changeRowInfo('tobSalesPrice', scope.row)"
                  ></el-input-number>
                </template>
              </el-table-column>

              <el-table-column prop="stock" label="库存" align="center" width="180">
                <template slot="header" slot-scope="scope">
                  <span class="red-font">*</span>
                  库存
                </template>
                <template slot-scope="scope">
                  <el-input-number
                    size="mini"
                    controls-position="right"
                    v-model="scope.row['stock']"
                    :precision="0"
                    :step="1"
                    :min="0"
                    :max="99999999"
                    :disabled="!scope.row['enable']||skuTableType"
                    @change="changeRowInfo('stock', scope.row)"
                  ></el-input-number>
                </template>
              </el-table-column>

              <el-table-column
                prop="maxPurchaseNum"
                label="最大购买数"
                align="center"
                width="180"
              >
                <template slot="header" slot-scope="scope">
                  <span class="red-font">*</span>
                  最大购买数
                </template>
                <template slot-scope="scope">
                  <el-input-number
                    size="mini"
                    controls-position="center"
                    v-model="scope.row['maxPurchaseNum']"
                    :precision="0"
                    :step="1"
                    :min="1"
                    :max="99"
                    :disabled="skuTableType"
                    @change="changeRowInfo('maxPurchaseNum', scope.row)"
                  ></el-input-number>
                </template>
              </el-table-column>

              <el-table-column prop="serviceGoodsId" align="center" width="180">
                <!--<template slot="header" slot-scope="scope">-->
                  <!--供应商商品ID-->
                <!--</template>-->
                <template slot="header" slot-scope="scope">
                  <el-row>
                    <el-col :span="24"><span class="red-font" v-if="!!isMember">*</span>供应商商品ID</el-col>
                  </el-row>
                </template>
                <template slot-scope="scope">
                  <el-input
                    size="mini"
                    controls-position="center"
                    v-model="scope.row['serviceGoodsId']"
                  ></el-input>
                  <el-button class="transparent-btn" type="success"  @click="showServiceGoodsIdSelect(scope.row)"></el-button>
                </template>
              </el-table-column>

              <el-table-column prop="unit" align="center" width="180">
                <template slot="header" slot-scope="scope">
                  <el-row>
                    <el-col :span="24"><span class="red-font" v-if="!isMember">*</span>计量单位</el-col>
                  </el-row>
                </template>
                <template slot-scope="scope">
                  <el-select size="mini" v-model="scope.row['unit']" placeholder="请选择" controls-position="center" :disabled="isMember" @change="changeRowInfo('unit', scope.row)">
                    <el-option
                      v-for="item in goodsCountWayList"
                      :key="item.value"
                      :label="item.name"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </template>
              </el-table-column>

              <el-table-column prop="number" align="center" width="180">
                <template slot="header" slot-scope="scope">
                  <el-row>
                    <el-col :span="24"><span class="red-font" v-if="!isMember">*</span>单位计量值</el-col>
                  </el-row>
                </template>
                <template slot-scope="scope">
                  <el-input-number
                    size="mini"
                    controls-position="center"
                    v-model="scope.row['number']"
                    :precision="0"
                    :step="1"
                    :min="1"
                    :max="9999"
                    :disabled="isMember"
                    @change="changeRowInfo('number', scope.row)"
                  ></el-input-number>
                </template>
              </el-table-column>
              <el-table-column label="操作" align="center" width="110">
                <template slot-scope="scope">
                  <el-button type="danger" icon="el-icon-delete" circle @click="deleteSkuItem(scope.row, item.skus)"></el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </template>
      <service-goods-id-selector
        ref="serviceGoodsIdSelector"
        :dialogVisible.sync="showGoodsIdSelector"
        @confirm="onServiceGoodsIdSelectorConfirm"
      ></service-goods-id-selector>

      <image-selector
        :dialogVisible.sync="showImageSelector"
        @confirm="onImageSelectorConfirm"
      ></image-selector>
      <!--</el-collapse>-->
    </div>
  </basic-container>
</template>

<script>
import ImageSelector from "@/components/ImageSelector";
import ServiceGoodsIdSelector from "@/components/ServiceGoodsIdSelector";
import { flatten } from "@/utils/sku";
import { diffArary } from "@/utils/index";
import { getDicts as getDicts } from '@/api/system/dict/data'

export default {
  components: {
    ImageSelector,
    ServiceGoodsIdSelector
  },
  props: {
    goodsSku: {
      type: Array,
    },
    goodsSpuSpec: {
      type: Array,
    },
    skuTableType: {
      type: Boolean,
      default: false
    },
    serviceType: {
      type: String
    },
    specType: {
      type: String
    },
  },
  computed: {
    isMember() {
      return (this.serviceType==='会员')?true:false
    }
  },
  watch: {
    goodsSku:{
      deep: true,
      immediate: true,
      handler(newSkus, oldSkus) {
        console.log('----->watch goodsSku');
        console.log(newSkus);
        // setTimeout(() => {
        //   this.$refs.skuTable.refresh()
        // }, 1500)
      },
    },
    goodsSpuSpec:{
      deep: true,
      immediate: true,
      handler(newSpuSpec, oldSpuSpec) {
        console.log('----->watch tbale goodsSpuSpec');
        console.log(newSpuSpec);
        setTimeout(() => {
          this.goodsSpuSpecDict = {};
          newSpuSpec.forEach((item)=>{
            if(!this.goodsSpuSpecDict[item.id]){
              this.goodsSpuSpecDict[item.id] = {};
            }
            this.goodsSpuSpecDict[item.id] = item.specClassList.concat();
          });
          console.log(this.goodsSpuSpecDict);
        }, 200)
        // this.goodsSpuSpecDict[]
      },
    }
  },
  data() {
    return {
      activeNames: [],
      batchAddObj: {},
      goodsSpuSpecDict:{},
      skuData: [],
      goodsCountWayList:[],
      coefficient: {
        purchase_coefficient: 0,
        guide_coefficient: 0,
      },
      showImageSelector: false,
      showGoodsIdSelector: false,
      addingImgRow: null, // 正在添加图片的那一行table row对象
      selectGoodsIdRow: null, // 正在选择供应商商品ID的那一行table row对象
    };
  },
  created() {
    this.init();
  },
  inject:['showSelectSkuItem'],
  methods: {
    init: function() {
      this.getGoodsCountWay();
    },
    /**
     * 获取服务分类
     */
    getGoodsCountWay() {
      getDicts('goods_count_way').then(response => {
        this.goodsCountWayList = [];
        response.data.forEach((item)=>{
          let newInfo = {};
          newInfo['name'] = item.dictLabel;
          newInfo['value'] = item.dictValue;
          this.goodsCountWayList.push(newInfo);
        })
      })
    },
    /**
     * 删除sku item
     */
    deleteSkuItem(row,itemSkus){
      if(this.specType === '1'){
        //通用类型
        for(let idx=0;idx<this.goodsSku.length;idx++){
          let item = this.goodsSku[idx];
          for(let i=item.skus.length-1;i>=0;i--){
            let skuItem = item.skus[i];
            if(skuItem.specs.length===3){
              if(skuItem.name1 === row.name1 && skuItem.name2 === row.name2 && skuItem.name3 === row.name3){
                item.skus.splice(i,1);
              }
            }
            if(skuItem.specs.length===2){
              if(skuItem.name1 === row.name1 && skuItem.name2 === row.name2){
                item.skus.splice(i,1);
              }
            }
            if(skuItem.specs.length===1){
              if(skuItem.name1 === row.name1){
                item.skus.splice(i,1);
              }
            }
          }
        }
      }else{
        for(let i=0;i<itemSkus.length;i++){
          let skuItem = itemSkus[i];
          if(skuItem.uuid === row.uuid){
            itemSkus.splice(i,1);
          }
        }
      }
    },
    /**
     *显示选择sku items列表
     */
    selectSkuItem(serviceName, spuSpecName, skus){
      let skuStr = JSON.stringify(skus);
      this.showSelectSkuItem(serviceName, spuSpecName, skuStr);
    },
    /**
     * 添加图片
     */
    addImg(row) {
      if(this.skuTableType==false){
         this.showImageSelector = true;
      }
      this.addingImgRow = row;
    },
    /**
     * 选中图片确认
     */
    onImageSelectorConfirm(selectedItem) {
      this.addingImgRow.picUrls = [];
      this.addingImgRow.picUrls.push(selectedItem.url);
      if(this.specType === '1'){
        this.addingImgRow.picUrl = selectedItem.url;
        this.batchUpdateRowsInfo('picUrl', this.addingImgRow);
      }else{
        this.addingImgRow.picUrl = selectedItem.url;
      }
    },
    showServiceGoodsIdSelect(row){
      console.log(this.skuTableType);
      if(this.skuTableType==false){
        this.showGoodsIdSelector = true;
        this.$refs.serviceGoodsIdSelector.show(row);
      }
      this.selectGoodsIdRow = row;
    },
    /**
     * 选中供应商Id
     */
    onServiceGoodsIdSelectorConfirm(selectedItem){
      console.log('------->onServiceGoodsIdSelectorConfirm:',selectedItem);
      this.selectGoodsIdRow.serviceGoodsId = selectedItem.goodsId;
      this.selectGoodsIdRow.unit = selectedItem.unit || 'day';
      this.selectGoodsIdRow.number = selectedItem.day;
    },
    changeRowInfo(type, row){
      if(this.specType === '1'){
        this.batchUpdateRowsInfo(type, row);
      }
    },
    batchUpdateRowsInfo(type, row){
      console.log('--------->batchUpdateRowsInfo');
      console.log(this.goodsSku);
      console.log(row);
      for(let idx=0;idx<this.goodsSku.length;idx++){
        let item = this.goodsSku[idx];
        for(let i=item.skus.length-1;i>=0;i--){
          let skuItem = item.skus[i];
          if(skuItem.specs.length===3){
            if(skuItem.name1 === row.name1 && skuItem.name2 === row.name2 && skuItem.name3 === row.name3){
              skuItem[type] = row[type];
            }
          }
          if(skuItem.specs.length===2){
            if(skuItem.name1 === row.name1 && skuItem.name2 === row.name2){
              skuItem[type] = row[type];
            }
          }
          if(skuItem.specs.length===1){
            if(skuItem.name1 === row.name1){
              skuItem[type] = row[type];
            }
          }
        }
      }
    }
  },
};
</script>
<style>
  .table-row .el-table .el-table__cell{
    padding: 0;
  }

  .table-row .el-table .cell{
    padding: 0;
  }

  .table-row .el-table th.el-table__cell > .cell{
    padding: 0;
  }

  .sku-table .el-input--mini .el-input__inner{
    width: 150px;
    text-align: center;
  }
</style>
<style lang="scss" scoped>
.input-number{
  width:200px;
}
.sku-table .avue-upload__avatar {
  width: 60px;
  height: 60px;
}
.sku-table .avue-upload__icon {
  width: 60px;
  height: 60px;
  line-height: 60px !important;
}
.sku-table .el-upload__tip {
  margin-top: unset;
}
.sku-table .avue-group__item {
  background-color: unset;
}
.sku-table .avue-group__item {
  margin-bottom: unset;
}
.sku-table .el-form-item {
  margin-bottom: unset;
}
.sku-table .el-col {
  margin-bottom: unset;
  line-height: 32px;
}
.sku-table .el-table .el-input-number--mini {
  width: 150px;
}
.sku-table  .table-row{
  border: 1px solid #ddd;
  border-radius: 6px;
  margin-bottom: 20px;
}

.sku-table  .table-row .title{
  padding: 0 20px;
}

.table-row .header-col{
  border-top: 1px solid #ddd;
}
.table-row .header-col:not(:last-child){
  border-right: 1px solid #dfe6ec;
}
.table-row .col-item{
  line-height: 108px;
}
.table-row .col-item:not(:last-child){
  border-right: 1px solid #dfe6ec;
}

.table-row .col-item .td-content{
  /*justify-content:center;*/
}
.table-row .col-item .td-title{
  border-bottom: 1px solid #dfe6ec;
}

.table-row .transparent-btn{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.table-row .header{
  padding: 10px 10px;
}
.table-row .header .right-btn{
  float: right;
}
.table-row .red-font{
  color: #ff0008;
  margin-right: 5px;
  vertical-align: sub;
}
</style>
